<template>
	<view class="content">
		<view class="topNav" :style="{height:navHeight+'px',paddingTop:BarHeight+'px'}">
			<view class="nav-left" @click="locationCity">
				定位中...
			</view>
			<view class="nav-search" @click="handleToSearch">
				<input type="text" placeholder="请搜索" placeholder-class="placClass" />
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const navHeight = ref(0)
	const BarHeight = ref(0)
	onLoad(() => {
		let {
			statusBarHeight,
			system
		} = uni.getSystemInfoSync()
		console.log(statusBarHeight);
		BarHeight.value = statusBarHeight
		navHeight.value = (statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44))
		console.log(BarHeight, navHeight);
	})
	const handleToSearch = () => {
		uni.navigateTo({
			url: "/pages/search/search"
		})
	}

	const locationCity = () => {
		console.log('1');
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log(res);
			},
			err: function(err) {
				console.log(err);
			}
		})
	}
</script>

<style lang="scss" scoped>
	.topNav {
		height: 100rpx;
		// background-color: #00aa7f;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.nav-left {
		font-size: 18rpx;
		font-weight: 600;
		color: #333;
		margin-right: 60rpx;
		font-style: italic;
	}

	.nav-search input {
		width: 100%;
		height: 62rpx;
		border-radius: 30rpx;
		padding-left: 25rpx;
		background-color: #e2eaf0a6;
		box-sizing: border-box;
	}

	.placClass {
		font-size: 24rpx;
		color: #fff;

	}
</style>